<template>
	<view class="content" style="background: #5abe80;min-height: 100vh;">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/shop_bg.jpg')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/shop_bg.jpg')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view  class="margin-top-05">
							</view>
							<view class="font-size-32 color-FFF font-weight-500">
								精选超市
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}"></view>
		</view>
		<view class="view display-flex" :style="`height:${pageHeight - (s+n)}px ;`">
			<view class="left" style="overflow: scroll;">
				<view v-for="item,index in Categorylist" :key="index" @click="tabsSwiper(index)"
					:class="activeIndex == index ?'active-item':'item'" class=" display-flex space-between align-items">
					<view :class="activeIndex == index ?'shu':''"></view>
					<view class="font-size-26 " :class="activeIndex == index ?'font-weight-500':''"
						:style="activeIndex == index?' color: #5abe80;':''">
						{{item.title}}
					</view>
					<view style="width: 6rpx;"></view>
				</view>
			</view>
			<view class="" style="width: 550rpx;">
				<view class=" margin-top-20">
					<scroll-view scroll-x="true" class="scroll-view_H">
						<view class="" style="display: inline-block;">
							<view class="display-flex margin-left-10">

								<view @click="stabsSwiper(sindex)" :class="sactiveIndex == sindex?'tabs-active':'tabs'"
									class="  center-size-20" v-for="sitem,sindex in Categorylist[activeIndex].children"
									:key="sindex">
									{{sitem.title}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="" style="height: 10rpx;">
						
					</view>
				</view>
				<scroll-view scroll-y="true" :style="`height:${pageHeight - (s+n + 50)}px ;`" @scrolltoupper="upper"
					@scrolltolower="scrolltolower" @scroll="scroll">
					<view class="text-center margin-top-120 font-size-26" v-if="list.length == 0">
						暂无数据！
					</view>
					<view v-else class="">
						<view v-for="item,index in list" :key="index" class="margin-top-20 view-item">
							<view style="padding: 20rpx;">
								<view @click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
									class="display-flex position-relative">
									<image :src="item.thumbImg"
										style="width: 220rpx;height: 220rpx; border-radius: 20rpx;" mode="aspectFill">
									</image>
									<view class="position-absolute" style="top: 0; left: 0rpx;">
										<image :src="imgaeUrl('/static/shop_top.png')"
											style="width: 70rpx;height: 76rpx;" mode=""></image>
									</view>
									<view
										class="file-1 display-flex flex-direction-column space-between margin-left-20">
										<view class="font-size-28 webkit-line-clamp" style="-webkit-line-clamp: 2;">
											{{item.title}}
										</view>
										<view class="">
											<view class="display-flex">
												<view class="tab center-size-20">
													{{item.tags}}
												</view>
											</view>
											<view class="display-flex align-items">
												<view class="margin-top-10" style="color: #FF2E38;">
													<text class="font-size-24 font-weight-bold">￥</text>
													<text class=" font-size-36 font-weight-bold">{{item.price}}</text>
												</view>

											</view>

											<view class="display-flex  align-items">
												<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
													class="label center-size-20  color-FFF">
													定向高佣
												</view>
												<view
													style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
													class="label1 center-size-20">
													¥{{item.money}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="title display-flex align-items margin-top-20" v-if="item.comment.length != 0">
									<view class="font-weight-500">
										推荐理由:
									</view>
									<view class="file-1 margin-left-20">
										<swiper vertical style="height: 36rpx;" :autoplay="true">
											<swiper-item v-for="citem,cindex in item.comment" :key="index">
												<view class="webkit-line-clamp" style="-webkit-line-clamp: 1;">
													{{citem}}
												</view>
											</swiper-item>
										</swiper>
									</view>
								</view>
							</view>
						</view>
						<view v-if="islod" class="margin-top-20 display-flex center align-items">
							<image :src="imgaeUrl('/static/lod.gif')" style="width: 40rpx;height: 40rpx;" mode="">
							</image>
							<view class="font-size-26 margin-left-10 color-666">
								正在加载...
							</view>
						</view>
						<view v-else class="padding-about-24">
							<uv-divider text="数据加载完毕"></uv-divider>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="position-fixed" style="bottom: 20%; right: 0rpx;">
			<button style="width: 150rpx;" open-type="share">
				<image :src="imgaeUrl('/static/shop_share.png')" style="width: 150rpx;height: 116rpx;" mode=""></image>
			</button>
		</view>
	</view>
	<u-tabbar :current="1"></u-tabbar>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom,
		onPageScroll,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const imgList = ref([])
	const Categorylist = ref([])
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([]) //热门视频
	const islod = ref(true)
	const pageHeight = ref(0)
	onLoad(function(option) {
		TJshopLists()
		shopCategory()
	});
	onShow(function() {});
	const activeIndex = ref(0)
	const sactiveIndex = ref(0)

	/** 切换 */
	function stabsSwiper(index) {
		sactiveIndex.value = index
		pagingState.value = false
		page.value = 1
		list.value = []
		islod.value = !islod.value
		shopLists()
	}
	/** 切换 */
	function tabsSwiper(index) {
		activeIndex.value = index
		sactiveIndex.value = 0
		pagingState.value = false
		page.value = 1
		list.value = []
		islod.value = !islod.value
		shopLists()
	}

	function scrolltolower() {
		if (!pagingState.value) {
			islod.value = !islod.value
		}
		shopLists()
	}
	/** 获取热门视频*/
	async function shopLists() {

		let object = {
			page: page.value,
			cid: Categorylist.value[activeIndex.value].id,
			sid: Categorylist.value[activeIndex.value].children[sactiveIndex.value].id
		}
		if (!pagingState.value) {
			console.log(1);
			const {
				code,
				data
			} = await api.shopLists(object)
			list.value = list.value.concat(data.data)
			console.log(list.value);
			islod.value = !islod.value
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	async function TJshopLists() {
		const {
			code,
			data
		} = await api.shopLists({
			isTj: 1
		})
		if (code == 0) {
			imgList.value = data.data
		}
	}
	async function shopCategory() {
		const {
			code,
			data
		} = await api.shopCategory()
		if (code == 0) {
			Categorylist.value = data.map(item => {
				item.children = [{
					id: 0,
					title: "全部"
				}, ...item.children]
				return item
			})
			shopLists()
		}
	}
	onReady(function() {
		pageHeight.value = uni.getSystemInfoSync().windowHeight;
		console.log('页面高度:', pageHeight.value);
	});
	onPageScroll(function(e) {
		console.log(e);
		headerOpt.value = Math.min(1, e.scrollTop / 200);
	});
	onReachBottom(function() {});
	onShareAppMessage(function(res) {
		return {
			title: local.get('config').subtitle,
			path: '/pages/Home/home/home' + '?puserId=' + local.get('userinfo').id,
		}
	})
	onShareTimeline(function(res) {
		console.log(local.get('config').subtitle)
		return {
			title: local.get('config').subtitle,
			path: '/pages/Home/home/home' + '?puserId=' + local.get('userinfo').id,
		}
	})
</script>

<style scoped lang="scss">
	button::after {
		border: none;
	}

	button {
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
		text-align: center;
		// background-color: #fff;
		background: rgba(0, 0, 0, 0.0);
		width: 100%;
		height: 100%;
	}

	.title {
		background: #fef8ec;
		color: #ba8441;
		font-size: 26rpx;
		padding: 8rpx 15rpx;
	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.tab {
		padding: 5rpx 10rpx;
		border-radius: 6rpx;
		border: #FE6740 1rpx solid;
		color: #FE6740;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.view-item {
		background: #FFFFFF;
		/* height: 500rpx; */
		border-radius: 20rpx;
		margin: 20rpx 20rpx 0 20rpx;
	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.tabs-active {
		border: #5abe80 1rpx solid;
		color: #5abe80;
		background: #FFFFFF;
	}

	.tabs-active,
	.tabs {
		border-radius: 30rpx;
		// width: 120rpx;
		padding: 0 25rpx;
		height: 45rpx;
		margin: 0 10rpx;
	}

	.tabs {
		background: #eae7ed;
		border: #eae7ed 1rpx solid;
		color: #333333;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.item {
		height: 110rpx;
		background: #FFFFFF;
	}

	.active-item {
		height: 110rpx;
		background: #F5F5F5;
	}

	.shu {
		height: 30rpx;
		width: 6rpx;
		background: #5abe80;
	}

	.left {
		width: 200rpx;
		// height: 100vh
		background: #FFFFFF;
	}

	.view {
		background: #F5F5F5;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.backGround {
		width: 750rpx;
		height: 420rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>